<script setup>
import { ref,watch } from 'vue';
import meipo from './utils/meipo.js';
import { useDark, useToggle } from '@vueuse/core'
//
const isDark = useDark()
const toggleDark = useToggle(isDark)

//信号
const isLight = ref(false)
//接收控制主题的信号
meipo.on('isLight',(msg)=>{
  console.log(msg)
  isLight.value = msg
})
//监视信号的变化
watch(isLight,(newKey)=>{
   toggleDark()
})
</script>
<template>
  <div 
  v-if="isDark"
  color-scheme="dark"
  class="dark">
        <!-- 一级路由出口 -->
        <Router-view></Router-view>
  </div>
  <div 
  class="light"
  color-scheme="light"
  v-else>
        <!-- 一级路由出口 -->
        <Router-view></Router-view>
  </div>
</template>

<style lang="scss" scoped>
.dark{
  :deep(.el-container){
    background-color: rgb(6,5,22);
    .el-aside{
      background-color:rgb(6,5,22);
      .el-menu-item{
        background-color: rgb(6,5,22);
        color: #7c7e82;
      }
      .el-menu-item.is-active{
        color: rgb(255, 255, 255);
        background-color: #8c8c8c;
     
      }
    }
    .el-main{
      background-color:  #646f7e;
        .el-menu{
          background-color: #313a46;
          .el-menu-item{
          background-color: #313a46;
          color: #99a0ad;
          }
        }
        //活动中心
        .mainBoder-box{
        .article-box{
          background-color:var(--el-black-background-color);
          .article-list{
            .articles{
              background-color:var(--el-black-article-color);
            }
          }
        }
        .feedback-box{
          background-color:var(--el-black-background-color);
          .feedbacks{
            background-color:var(--el-black-article-color);
          }
        }
      }
      //消息
      .message-box{
        .feedback-box{
          background-color:var(--el-black-background-color);
          .feedbacks{
            background-color:var(--el-black-article-color);
          }
        }
        .comment-box{
          background-color:var(--el-black-background-color);
          :deep(.el-collapse){
              background-color:var(--el-black-article-color);
          }
        }
        .article-box{
          background-color:var(--el-black-background-color);
          .articles{
            background-color:var(--el-black-article-color);
          }
        }
        
      }
      //我的主页
      .box{
        background-color:var(--el-black-background-color);
        .articles{
          background-color:var(--el-black-article-color);
        }
      }
      //管理员
      .admin-box{
        background-color: var(--el-black-background-color);
        //
        .article{
          background-color:var(--el-black-article-color);
        }
        .comments{
          background-color:var(--el-black-article-color);
        }
        //
        .feedbacks{
          background-color:var(--el-black-article-color);
        }
        //
        .role-box{
          background-color: var(--el-black-background-color);
        }
      }
      
    }
  }
  //发布新贴
  .box{
    background-color:var(--el-black-background-color);
    :deep(.add){
      background-color:rgb(154, 164, 164);
    }
  }
  //帖子详情
  .detail-box{ 
    background-color:var(--el-black-background-color);
    .article{
      background-color:var(--el-black-background-color);
    }
  } 
}

.light{
  //background-color:var(--el-background-color);
  :deep(.el-container){
    .el-aside{
      background-color:rgb(207,244,222);
      .el-menu-item{
        background-color:rgb(207,244,222);
        color: #7c7e82;
      }
      .el-menu-item.is-active{
        color: rgb(2, 2, 2);
        background-color: #d7d7d7;
      }
    }
    .el-main{
      background-color: #e6e6e6;
      .el-menu{
        background-color: #fefefe;
        .el-menu-item{
          background-color: #fefefe;
        }
      }
      //活动中心
      .mainBoder-box{
        .article-box{
          background-color:var(--el-background-color);
          .article-list{
            .articles{
              background-color:var(--el-article-color);
            }
          }
        }
        .feedback-box{
          background-color:var(--el-background-color);
          .feedbacks{
            background-color:var(--el-article-color);
          }
        }
      }
      //消息
      .message-box{
        .feedback-box{
          background-color:var(--el-background-color);
          .feedbacks{
            background-color:var(--el-article-color);
          }
        }
        .article-box{
          background-color:var(--el-background-color);
          .articles{
            background-color:var(--el-article-color);
          }
        }
        .comment-box{
          background-color:var(--el-background-color);
          .el-collapse{
            background-color:var(--el-article-color);
          }
        }
      }
      //我的主页
      .box{
        background-color:var(--el-background-color);
        .articles{
          background-color:var(--el-article-color);
        }
      }
      //管理员
      .admin-box{
        background-color: var(--el-background-color);
        //
        .article{
          background-color:var(--el-article-color);
        }
        .comments{
          background-color:var(--el-article-color);
        }
        //
        .feedbacks{
          background-color:var(--el-article-color);
        }
        //
        .role-box{
          background-color: var(--el-background-color);
        }
      }
      
    }
  }
  .box{
    background-color:var(--el-background-color);
  }
}
</style>